<style>
    #account .layui-card {
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

</style>
<div class="layui-row layui-col-space15" style="padding: 20px" id="account">
    <div class="layui-card">
        <div class="left">
            <img src="assets/images/checked.png" alt="" style="width: 20px;height: 20px">
            <span>登录密码</span>
        </div>
        <span style="text-align: left">建议您定期更改密码，设置较复杂的密码可以提高账号的安全性</span>
        <a id="updatePassword" lay-event="password" style="color: #38B7CB;">修改</a>
    </div>
    <div class="layui-card">
        <div class="left">
            <img src="assets/images/checked.png" alt="" style="width: 20px;height: 20px">
            <span>绑定手机</span>
        </div>
        <span style="text-align: left">验证后，可用于快速找回登录密码</span>
        <a class="" lay-event="phone" style="color: #38B7CB;">修改</a>
    </div>
</div>

<script type="text/html" id="update-password-model">
    <form id="update-password-form" lay-filter="update-password-form" class="layui-form model-form">
        <div class="layui-form-item">
            <label class="layui-form-label">旧密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required|psw" class="layui-input"
                       placeholder="请输入原密码" lay-verType="tips">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input type="password" name="newPassword" required lay-verify="required|psw" class="layui-input"
                       placeholder="请输入新密码" lay-verType="tips">
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="rePassword" required lay-verify="required|repsw" class="layui-input"
                       placeholder="再次输入新密码" lay-verType="tips">
            </div>
        </div>
        <div class="layui-form-item model-form-footer">
            <button class="layui-btn" lay-filter="updatePassword-form-submit" lay-submit style="background: #38B7CB;
">确定
            </button>
            <button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button>
        </div>
    </form>
</script>


<script>
    layui.use(['layer', 'form', 'admin', 'config'], function () {
        var layer = layui.layer,
            admin = layui.admin,
            config = layui.config,
            form = layui.form;

        $('#updatePassword').click(function () {
            layer.open({
                type: 1,
                title: '修改密码',
                area: '450px',
                offset: '120px',
                content: $('#update-password-model').html(),
                success: function () {

                }
            })
        })

        form.on('submit(updatePassword-form-submit)', function (data) {
            layer.load(2);
            admin.req('api-sys/api/sysUser/updateMima?access_token=' + config.getToken().access_token, JSON.stringify(data.field), function (data) {
                layer.closeAll('loading');
                if (data.code == 0) {
                    layer.msg(data.msg, {icon: 1, time: 2000});
                    layer.closeAll('page');
                } else {
                    layer.msg(data.msg, {icon: 2});
                }
            }, 'PATCH');
            return false;
        })

        //添加表单验证方法
        form.verify({
            psw: [/^[\S]{4,12}$/, '密码必须4到12位，且不能出现空格'],
            repsw: function (t) {
                if (t !== $('#update-password-form input[name=newPassword]').val()) {
                    return '两次密码输入不一致';
                }
            }
        });
    })
</script>
